<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>水平垂直居中-浮动方法</title>
        <style type="text/css">
            html,
            body{
                height: 100%;
            }

            #parent {
                height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/
                border: 1px solid red;
            }
            #vertically_center,
            #extra {
                display: inline-block;/*把元素转为行内块显示*/
                vertical-align: middle;/*垂直居中*/
            }
            #extra {
                height: 100%; /*设置线盒型为父元素的100%高度*/
            }
            </style>

            <!--[if lt IE 8]>
                <style type="text/css">
                    /*IE6-7不支持display:inline-block，所以在ie6-7另外写一个hack，用来支持ie6-7*/
                    #vertically_center,
                    #extra {
                        display: inline;
                        zoom: 1;
                    }
                    #extra {
                    width: 1px;
                    }
                </style>
            <![endif]-->
    </head>
    <body>
        <div id="parent">
            <div id="vertically_center">
                <p>I am vertically centered!</p>
            </div>
            <div id="extra"><!-- ie comment --></div>
        </div>
    </body>
</html>